<template>
  <div class="bg">
    <register-header></register-header>
    <div class="re-form">
      <van-form>
        <!-- 手机号 -->
        <van-field
          v-model="registerData.phoneNumber"
          name="手机号"
          label="手机号"
          placeholder="手机号"
          :rules="[{pattern:phoneValidator, message: '手机号输入有误'}]"
        />
        <p>
        <div>
          <van-field
            v-model="registerData.verify_code"
            center
            clearable
            label="短信验证码"
            placeholder="请输入短信验证码"
          >
            <template #button>
              <span style="color:#151515" v-show="flag==true" @click="verify">发送验证码</span>
              <!-- <van-button size="small" type="primary" @click="verify" v-show="flag==true" >发送验证码</van-button> -->
              <div v-show="flag==false">
                <van-count-down :time="time"  :auto-start="false" @finish="finish" ref="countDown">
                  <template #default="timeData">
                    <span class="block">{{ timeData.seconds }}</span>
                  </template>
                </van-count-down>
              </div>
            </template>
            
          </van-field>
        </div>
        <p>
          <!-- 密码框 -->
          <van-field
            v-model="registerData.password"
            type="password"
            name="password"
            label="密码"
            placeholder="密码"
            :rules="[{pattern:passwordValidator, message: '输入6-20个字母、数字、下划线'}]"
          />
          <!-- 确认密码框 -->
          <van-field
            v-model="confirmPassword"
            type="password"
            name="confirmPassword"
            label="确认密码"
            placeholder="确认密码"
            :rules="[{validator:confirm , message:'密码与上一次密码不一致'}]"
          />
          <p>
            <!-- 真实姓名 -->
          <van-field
          v-model="registerData.name"
          name="name"
          label="真实姓名"
          placeholder="name"
          :rules="[{pattern:nameValidator,message:'姓名格式错误'}]"
        />
        <p>
        <!-- 身份证号 -->
        <van-field
          v-model="registerData.id"
          name="id"
          label="身份证号"
          placeholder="id"
          :rules="[{pattern:idValidator,message:'身份证号格式错误'}]"
        />
        <p>
        <!-- 注册 -->
          <div style="margin: 16px;">
            <van-button round block type="info" @click="regis">注册</van-button>
          </div>
      </van-form>
    </div>
    

  </div>
</template>

<script>
import {captchaPhone , register} from '@/api/user'
import registerHeader from './child/registerHeader.vue'
import registerMessage from './child/registerMessage.vue'
export default {
  name:"register",
  data(){
    return {
      // 二次密码
      secondPassword:false,
      // 发送验证码后的时间间隔 60s
      time:60000,
      // 发送验证码按钮 显示与隐藏
      flag:true,
      // 开始倒计时
      autoStart:false,
      registerData:{
        // 手机号
        phoneNumber:'',
        // 密码
        password:'',
        // 真实姓名
        name:'',
        //身份证号
        id:'',
        
        // 手机验证码
        verify_code:''
      },
      // 检查重复密码
      confirmPassword:'',
      // 手机号正则
      phoneValidator:/^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/,
      // 密码正则
      passwordValidator:/^(\w){6,20}$/,
      // 真实姓名正则
      nameValidator:/^[\u4e00-\u9fa5]{2,4}$/,
      // 身份证号正则
      idValidator:/^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
    }
  },
  components:{
    registerHeader,
    registerMessage
  },
  methods:{
    // 发送手机验证码
    verify(){
       this.$toast.loading('验证中...');
      captchaPhone(this.registerData.phoneNumber)
       setTimeout(() => {
          this.$toast.clear();
          this.flag = false;
          this.$refs.countDown.reset();
          this.$refs.countDown.start();
        }, 300);
    },
    finish(){
       this.flag =  true;
    },
    // 注册
    regis(){
      if(this.secondPassword){
        register(this.registerData).then(res=> {
          this.$toast.loading('注册中...');
          setTimeout(() => {
            this.$toast.clear();
            if(res.code==0){
            this.$toast.loading('注册成功,正在跳转登录界面...');
              setTimeout(() => {
                this.$toast.clear();
                this.$router.push('/login');
              },1500);
          }else if(res.code==-2){
            
            this.$dialog.alert({
              message: res.msg,
            }).then(() => {

            });
          }
          }, 1000);
        })
      }   
    },
    // 检查第二次密码输入
    confirm(val){
      if(val!= this.registerData.password){
        this.secondPassword = false;
        return false;
      }else {
        this.secondPassword = true;
        return true
      }
    },
  },
}
</script>

<style lang="less">

.re-form {
  width: 80%;
  margin: 30px auto;
}
.block {
  margin-right: 25px;
  height: 50px;
  font-size: 15px;
  // color: red;
}
.van-nav-bar__arrow {
    margin-right: 4px;
    font-size: 25px;
  }
  .van-nav-bar__title {
    max-width: 60%;
    margin: 0 auto;
    color: #323233;
    font-weight: 500;
    font-size: 20px;
  }
  .van-nav-bar .van-icon {
    color: #151515;
  }
  .van-cell {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    padding: 2.66667vw 4.26667vw;
    overflow: hidden;
    color: #323233;
    font-size: 3.73333vw;
    line-height: 6.4vw;
    background-color: #ffffff;
}
</style>